{% if not error %}
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">{{ _("{} wants to access the following details from your account").format(client_id) }}</h3>
  </div>
  <div class="panel-body">
      <ul class="list-group">
      {% for dtl in details %}
        <li class="list-group-item">{{ dtl.title() }}</li>
      {% endfor %}
      </ul>
    <ul class="list-inline">
      <li>
        <button id="allow" class="btn btn-sm btn-primary">{{ _("Allow") }}</button>
      </li>
      <li>
        <button id="deny" class="btn btn-sm btn-light">{{ _("Deny") }}</button>
      </li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  frappe.ready(function() {
    $('#allow').on('click', function(event) {
      window.location.replace("{{ success_url | string }}");
    });
    $('#deny').on('click', function(event) {
      window.location.replace("{{ failure_url | string }}");
    });
  });
</script>
{% else %}
<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">{{ _("Authorization error for {}.").format(client_id) }}</h3>
  </div>
  <div class="panel-body">
    <p>{{ _("An unexpected error occurred while authorizing {}.").format(client_id) }}</p>
    <h4>{{ error }}</h4>
    <ul class="list-inline">
      <li>
        <button class="btn btn-sm btn-light">{{ _("OK") }}</button>
      </li>
    </ul>
  </div>
</div>
{% endif %}